<template>
  <div class="search">
    <el-card class="search-view" shadow="hover">
      <template #header>
        <h4>关键词搜索</h4>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right">
              <MoreFilled />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <div class="search-chart">
        <div class="search-chart-line">
          <h5 class="line-title">搜索用户数</h5>
          <div class="line-count">{{ numberFormat(lineChartData.uTotal) }}</div>
          <v-chart :option="getLineOption('userList','搜索用户数')" autoresize></v-chart>
        </div>
        <div class="search-chart-line">
          <h5 class="line-title">搜索量</h5>
          <div class="line-count">{{ numberFormat(lineChartData.cTotal) }}</div>
          <v-chart :option="getLineOption('countList','搜索量')" autoresize></v-chart>
        </div>
      </div>
      <el-table :data="tableData">
        <el-table-column label="排名" prop="rankNo" width="60"></el-table-column>
        <el-table-column label="关键字" prop="word"></el-table-column>
        <el-table-column label="搜索数量" prop="count"></el-table-column>
        <el-table-column label="搜索用户数" prop="user"></el-table-column>
        <el-table-column label="搜索占比" prop="rang"></el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="tableTotalData.length" v-model:current-page="currentPage" :page-size="pageSize" />
    </el-card>
    <el-card class="search-view" shadow="hover">
      <template #header>
        <h4>分类销售排行</h4>
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="商品" size="small">商品</el-radio-button>
          <el-radio-button label="品类" size="small">分类</el-radio-button>
        </el-radio-group>
      </template>
      <div class="search-pie">
        <v-chart :option="getPieOption()" autoresize></v-chart>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "Search",
};
</script>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();
const tabPosition = ref('商品');
const currentPage = ref(1);
const pageSize = ref(5);

//获取搜索关键词,准备数据
const searchWord = computed(()=>reportDataStore.reportData.searchWord)
const tableTotalData = computed(()=>{
  if(!searchWord.value) return[]
  return searchWord.value.map((item,index)=>{
    return{
      ...item,
      rankNo: index + 1,
      rang:((item.user/item.count)*100).toFixed(2) + '%'
    }
  })
})
//分页,截取数据
const tableData = computed(()=>{
  return tableTotalData.value.slice((currentPage.value -1)*pageSize.value,currentPage.value*pageSize.value)
})

//左边折线图的数据
const lineChartData = computed(()=>{
  const data ={
    wordList:[],// 水平轴需要的数据
    userList:[],// 搜索用户数图形的Y轴使用的数据
    countList:[], // 搜索量图形Y轴要使用的数据
    uTotal:0,//总的搜索用户数
    cTotal:0, //  总的搜索量

  }
  if(tableTotalData.value && tableTotalData.value.length > 0){
    tableTotalData.value.forEach(item=>{
      data.wordList.push(item.word)
      data.userList.push(item.user)
      data.countList.push(item.count)
      data.uTotal +=item.user
      data.cTotal += item.count
    })
  }
  return data
})

//左侧折线图的图表参数
const getLineOption=(listName:'userList' | 'countList',name:string)=>{
  return{
    xAxis:{
      boundaryGap: false,
      data: lineChartData.value.wordList
    },
    yAxis:{
      show: false
    },
    grid:{
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    series:{
      type:'line',
      data:lineChartData.value[listName],
      smooth: true,
      itemStyle:{
        opacity:0
      },
      lineStyle:{
        color: '#5FBBFF'
    },
    areaStyle: {
        color: '#c7e7ff'
      }
    },
    tooltip: {
      trigger: 'axis',
      confine: true
    }
  }
}

//获取饼图原始数据
const saleRank = computed(() => reportDataStore.reportData.saleRank);

const pieChartData = computed(()=>{
  const data = {
    categoryList : [], //分类数据
    goodsList: [],  //商品数据
    cTotal: 0,   //分类数量
    gTotal: 0   //商品数量
  }
  if(!saleRank.value) return{} as any
  const {
    //起别名
    category: { axisX, data1 },
    goods: { axisX: axisX2, data1: data2 }
  } = saleRank.value;

  //统计 分类和商品总数量
  const total1 = data1.reduce((prev, item) => prev + item, 0);
  data.cTotal = total1;
  const total2 = data2.reduce((prev, item) => prev + item, 0);
  data.gTotal = total2;


  //分类数据
  axisX.forEach((item,index)=>{
    const percent = ((data1[index] / total1)*100).toFixed(2) + '%'
    data.categoryList.push({
      name: item + '|' + percent,
      value: data1[index],
      percent,
      labelName: item
    })
  })


  //商品数据
  axisX2.forEach((item,index)=>{
    const percent = ((data2[index] / total2) * 100).toFixed(2) + '%';
    data.goodsList.push({
      name: item + '|' + percent,
      value: data2[index],
      percent,
      labelName: item
    });
  })
   return data
})

// 饼状图的参数
const getPieOption = () => {
  const { categoryList, goodsList, cTotal, gTotal } = pieChartData.value;
  const list = tabPosition.value === '商品' ? goodsList : categoryList;
  const total = tabPosition.value === '商品' ? gTotal : cTotal;
  return {
    title: [
      {
        text: `${tabPosition.value}分布`,
        textStyle: {
          fontSize: 14,
          color: '#666'
        },
        left: 20
      },
      {
        text: '累计订单量',
        left: '34%',
        top: '44%',
        textStyle: {
          fontSize: 14,
          color: '#666'
        },
        subtext: total,
        subtextStyle: {
          fontSize: 28
        },
        textAlign: 'center'
      }
    ],
    tooltip: {
      trigger: 'item',
      // 格式化显示出来的数据
      formatter: (params: any) => {
        return `${tabPosition.value}分布<br/>
        ${params.marker} ${params.data.labelName}<br/>
        ${params.marker} 数量 : ${params.data.value}<br/>
        ${params.marker} 占比 : ${params.data.percent}
        `;
      }
    },
    legend: {
      top: 'center',
      left: '70%'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        center: ['35%', '53%'],
        radius: ['40%', '56%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          position: 'outside',
          formatter: (params: any) => {
            return params.data.labelName;
          }
        },
        labelLine: {
          length: 7,
          length2: 5
        },
        data: list
      }
    ]
  };
};



</script>

<style lang="scss" scoped>
.search {
  display: flex;
  .search-view {
    flex: 1;
    cursor: pointer;
    :deep(.el-card__header) {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        font-weight: 500;
      }
    }

    &:first-child {
      margin-right: 10px;
      .search-chart {
        .search-chart-line {
          display: inline-block;
          width: 50%;
          &:first-child {
            padding-right: 5px;
          }
          &:last-child {
            padding-left: 5px;
          }
          h5 {
            padding: 0;
            margin: 0;
            color: #999;
          }
          .line-count {
            font-size: 24px;
            letter-spacing: 1px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
    }
    &:last-child {
      margin-left: 10px;
      .search-pie {
        height: 400px;
      }
    }
  }
}
</style>